<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册页面</title>
    <script type="text/javascript">
        //0.所有的动态绑定事件 一定要写在window.onload 方法中
        //当所有页面元素加载完毕后，才能进行元素获取
        window.onload = function () {
            //当页面窗口加载完毕后，就会触发该方法
            console.log(document.getElementById('btn1'));
            //1.给提交按钮绑定点击事件
            //JS当中所有可以在元素当中表示的属性，都可以在JS代码中当做属性被调用出来
            document.getElementById('btn1').onclick = function () {
                console.log("普通按钮被点击");
                //获取用户名和密码的值
                var usernameValue = document.getElementById('username').value;
                var passwordValue = document.getElementById('password').value;
                console.log("用户名 = " + usernameValue);
                console.log("密码 = " + passwordValue);
                //判断输入的值是否为空
                //trim() 去除字符串两边的空格
                if (usernameValue.trim() == '') {
                    alert("请输入用户名！");
                    return;
                }
                if (usernameValue.trim() == '') {
                    alert("请输入密码！");
                    return;
                }
            };
            //用户名输入框失去焦点事件
            document.getElementById('username').onblur = function () {
                console.log("用户名输入框焦点移除");
                var usernameValue = document.getElementById('username').value;
                //trim() 去除字符串两边的空格
                if (usernameValue.trim() == '') {
                    alert("请输入用户名！");
                    return;
                }
            };
        }
    </script>
</head>
<body>
<h1 align="center">用户注册页面</h1>
<form method="get">
    用户名:<input type="text" name="username" id="username"/><br/>
    密码:<input type="password" name="password" id="password"/><br/>
    性别：<input type="radio" name="gender" checked="checked">男<input type="radio" name="gender">女<br/>
    邮箱地址：<input type="text" name="email"/><br/>
    电话号码：<input type="text" name="telephone"><br/>
    用户简介：<textarea name="introduce"></textarea>
    <button type="submit">提交</button>
    <button type="button" id="btn1">普通按钮</button>
    <button type="reset">重置</button>
</form>
</body>
</html>